<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>退货</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="/js/vue.js"></script>
		<script src="/js/axios.js"></script>
		<script src="/js/qs.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
		@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
	</head>
	<body>
		
		<div style="margin-left: 15px; margin-top:10px ;" id="app1">
			<div style="width: 100%;margin-left: 15px;height:60px;  display: block;">
				<i class="el-icon-caret-right" style="line-height: 40px;margin-right: 5px; float: left;"></i>
				<template style="margin-top: 20px;">
					<el-select v-model="value7" filterable  @change="findchange()" placeholder="全部数据" style="float: left;width: 120px; height: 60px;">
						<el-option v-for="item in allcomoptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</template>
				<i class="el-icon-search" style="line-height: 40px;float: left;margin-left: 10px; width: 50px; height: 50px;"></i>
				<!-- 搜索框 -->
				<div style="display: block;margin-left: -20px;float: left; cursor: pointer;">
					<el-input style="width: 200px;" placeholder="" v-model="inputtheme">
						<el-button slot="append" @click="search()"  style=" width: 80px;">
							订单
						</el-button>
					</el-input>
				</div>
			</div>
			
			<el-dialog title="发货/物流信息" :visible.sync="dialogPhysicalVisible" width="40%">
				<hr style="border: 0.5px solid #666666;margin: -15px 0px 35px;" />
				<el-form :model="physicalform" ref="physicalform" label-width="100px" class="demo-physicalform">
					<el-form-item label="物流公司:" label-width="80px">
						<el-autocomplete class="inline-input" style="width: 90%;" v-model="physicalform.ogPhysical" :fetch-suggestions="querySearch"
						 placeholder="请输入内容">
						</el-autocomplete>
						<!-- <el-input  placeholder="" v-model="physicalform.ogPhysical"
						 style="width: 90%;"></el-input> -->
					</el-form-item>
					<el-form-item label="物流单号:" label-width="80px">
						<el-input placeholder="" v-model="physicalform.ogPhysicalid" style="width: 90%;"></el-input>
					</el-form-item>
					<el-form-item label="运费:" label-width="80px">
						<el-input placeholder="" v-model="physicalform.carriagemoney" style="width: 90%;"></el-input>
					</el-form-item>
					<el-form-item label="运费结算:" label-width="80px">
						<el-input placeholder="" v-model="physicalform.carriagejs" style="width: 90%;"></el-input>
					</el-form-item>
					<el-form-item label="备注:" label-width="80px">
						<el-input placeholder="" v-model="physicalform.ogRemark" style="width: 90%;"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogPhysicalVisible = false">取 消</el-button>
					<!-- dialogFormVisible = false -->
					<el-button type="primary" @click="addphysicalForm('physicalform')">确定</el-button>
				</div>
			</el-dialog>
			
			<!-- 新建回款记录 -->
			
			<span style="font-size: 13px; color: #333333;">退货记录<a style="font-size: 12px;color: #807E7E;">&nbsp;共{{pages.total}}条</a></span>
			<div style=" width: 98%;padding-left: 5px;">
			</div>
			<div style=" height: 40px;  width: 98.5%;">

				<template>
					<el-table ref="tableData1" tooltip-effect="dark" :data="tableData1" border style="width: 100%;color: black;">
						<el-table-column type="selection" width="35" align="center">
						</el-table-column>
						<el-table-column prop="rgId" label="编号" width="60" align="center">
						</el-table-column>
						<el-table-column prop="cust_name" show-overflow-tooltip  label="客户" width="100" align="center">
						</el-table-column>
						<el-table-column prop="title" show-overflow-tooltip  label="订单" width="150" align="center">
						</el-table-column>
						<el-table-column prop="data" label="退货时间"  width="150" align="center">
						</el-table-column>
						<el-table-column  label="退货金额"  width="150" align="center">
							<template slot-scope="scope">
								￥{{scope.row.rgMoney}}
							</template>
						</el-table-column>
						<el-table-column prop="u_name" label="发货人" align="center">
						</el-table-column>
						<el-table-column label="状态" align="center">
							<template slot-scope="scope">
								<span v-if="scope.row.srefundstatus==1">
									退货中
								</span>
								<span v-if="scope.row.srefundstatus==2">
									已完成
								</span>
							</template>
						</el-table-column>
						
						<el-table-column fixed="right" label="操作" width="100" align="center">
							<template slot-scope="scope">
									<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">退货单视图</div>
									<i class="el-icon-document" style="margin: 0px 2px;font-size: 17px;cursor:pointer;" @click="orderGood(scope.row.rgId)"></i>
									</el-tooltip>
									<span v-if="scope.row.ogType==0">
										<el-tooltip content="Bottom center" placement="bottom">
										<div slot="content">发货</div>
										<!-- <div @click="addphysical(scope.row)" style="float: right; width: 22px; margin-right: 15px; line-height: 22px; cursor:pointer;">
											<img style="width: 20px;height: 20px; " src="/imgs/product/发货通知.png">
										</div> -->
										</el-tooltip>
									</span>
									
							</template>
						</el-table-column>
					</el-table>
					<div style="margin-top: 10px">
						<div style="display: block; float: left;margin-left: 5px;">
							<el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">删除</div>
								<i class="el-icon-delete" style="margin: 8px;font-size: 17px;"></i>
							</el-tooltip>
						</div>
						<!-- 分页 -->
						<div style="display: block; float: left; margin-left: 170px;">
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
							 :page-sizes="[4, 6, 8,10]" :page-size="pages.pageSize" layout="total, sizes,prev, pager, next, jumper" :total="pages.total">
							</el-pagination>
						</div>
						<div style="display: block; float: right;margin-right: 15px;">
							<el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">打印</div>
								<el-button circle size="mini"><i class="el-icon-printer" style="font-size: 17px;"></i></el-button>&nbsp;
							</el-tooltip>

							<el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">导出Excel</div>
								<el-button circle size="mini"><i class="el-icon-tickets" style="font-size: 17px;"></i></el-button>
							</el-tooltip>

						</div>
					</div>
				</template>
			</div>
		</div>
		<script type="text/javascript">
			var pageinfo = ${
				pagejson
			};
			var listTable = ${
				list
			};
			var app1 = new Vue({
				el: "#app1",
				data: {
					formLabelWidth: '90px',
					formLabelWidth1: '30px',
					allcomoptions: [{
						value: '0',
						label: '全部数据'
					},{
						value: '1',
						label: '退货中'
					},{
						value: '2',
						label: '已完成'
					}],
					value7: '',
					physicalform: {
						oId: '',
						ogId: '',
						ogRemark: '',
						ogPhysical: '',
						ogPhysicalid: '',
						carriagemoney: '',
						carriagejs: '',
					},
					inputtheme: '',
					dialogPhysicalVisible: false,
					tableData1: listTable,
					pages: pageinfo,
					currentPage4: pageinfo.pageNum, 
					dialogDelete: false,
					restaurants:[]

				},
				methods: {
					clickDept(id) {
						alert(id);
					},
					handleSizeChange(val) {
						Max.pasSize=val;
						var statusid=null;
						var search=null;
						var _this=this;
						//判断是否带条件;
						var url= window.location.href;
						var url1= url.indexOf("?");
						if(url1!=-1){
							//截取每一个条件
							var urlcondition= url.substring(url1+1,url.length).split('&');
							for(var i=0;i<urlcondition.length;i++){
								
								if(urlcondition[i].split('=')[0]=="statusid"){
									statusid=decodeURI(urlcondition[i].split('=')[1]);
								}
								if(urlcondition[i].split('=')[0]=="search"){
									search=decodeURI(urlcondition[i].split('=')[1]);
								}
							}
						}
						$.ajax({
						      type: "post",
						      url: "/sales/prosale/refundgood",
						      data: {pageNum:1,pageSize:val,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
						    	  _this.tableData1=sdata.list;
						          _this.pages=sdata;
								  _this.currentPage4=sdata.pageNum;
						      }
						});
					},
					handleCurrentChange(val) {
						//查询的行数
						var pageSize= Max.pasSize;
						var statusid=null;
						var search=null;
						var _this=this;
						//判断是否带条件;
						var url= window.location.href;
						var url1= url.indexOf("?");
						if(url1!=-1){
							//this.complaintheme=decodeURI(url.substring(url1+1,url.length).split('&')[0].split('=')[1]);
							//截取每一个条件
							var urlcondition= url.substring(url1+1,url.length).split('&');
							for(var i=0;i<urlcondition.length;i++){
								
								if(urlcondition[i].split('=')[0]=="statusid"){
									statusid=decodeURI(urlcondition[i].split('=')[1]);
								}
								if(urlcondition[i].split('=')[0]=="search"){
									search=decodeURI(urlcondition[i].split('=')[1]);
								}
							}
						}
						$.ajax({
						      type: "post",
						      url: "/sales/prosale/refundgood",
						      data: {pageNum:val,pageSize:pageSize,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
						    	  _this.tableData1=sdata.list;
						          _this.pages=sdata;
								  _this.currentPage4=sdata.pageNum;
						      }
						});
					},
					deleteDept(id) {
						alert(id);
					},
					//删除角色接口
					DeleteRole() {
						var _this = this;
						axios.post("/sales/prosale/deletetrm",
								//参数转换
								Qs.stringify({
									'ID': _this.ID
								}, {
									arrayFormat: 'brackets'
								})
								//ajax请求成功的回调函数
							).then(function(response) {
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(response.data);
								/* this.$message({
								type: 'success',
								message: '删除成功!'
							}); */
								alert("删除成功！");
								window.location.href = '/sales/prosale/returnMoney';

							})
							.catch(function() {
								alert("删除失败！");
								/*this.$message({
								type: 'error',
								message: '删除失败!'*/
							});
						//这个是数据的初始化
					},
					deleterolehow(ID) {
						this.ID = ID;
						this.dialogDelete = true;
					},
					findchange(){
						var pageSize= Max.pasSize;
						var statusid=null;
						var search=null;
						var _this=this;
						if(this.value7.toString()== "0"){
							window.location.hash='#/sales/prosale/outgood';
						}else{
							window.location.hash='#/sales/prosale/outgood?statusid='+this.value7;
							statusid=this.value7;
						}
						this.inputtheme='';
						$.ajax({
						      type: "post",
						      url: "/sales/prosale/refundgood",
						      data: {pageNum:1,pageSize:pageSize,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
						    	  _this.tableData1=sdata.list;
						          _this.pages=sdata;
								  _this.currentPage4=sdata.pageNum;
						      }
						});
					},
					search(){
						var pageSize= Max.pasSize;
						var statusid=null;
						var search=null;
						var _this=this;
						//判断是否带条件;
						//判断是否根据条件筛选
						if(this.value7.toString()=='0'||this.value7.toString()==''){
							if(this.inputtheme==""){
								window.location.hash='#/sales/prosale/outgood'
							}
							else{
								window.location.hash='#/sales/prosale/outgood?search='+this.inputtheme;
								search=this.inputtheme;
							}
						}else{
							statusid=this.value7.toString();
							if(this.inputtheme==""){
								window.location.hash=window.location.hash.split('&')[0];
							}
							else{
								window.location.hash=window.location.hash.split('&')[0]+'&search='+this.inputtheme;
								search=decodeURI(this.inputtheme);
							}
						}
						$.ajax({
						      type: "post",
						      url: "/sales/prosale/refundgood",
						      data: {pageNum:1,pageSize:pageSize,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
								  console.log(_this.tableData1);
						    	  _this.tableData1=sdata.list;
						          _this.pages=sdata;
								  _this.currentPage4=sdata.pageNum;
						      }
						});
					},
					orderGood(id){
						window.open("/sales/prosale/refundgoodview?rgid="+ id); 
					},
					addphysical(row){
						this.physicalform.oId=row.oId;
						this.physicalform.ogId=row.ogId;
						this.dialogPhysicalVisible=true;
						
					},
					querySearch(queryString, cb) {
						var restaurants = this.restaurants;
						var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
						// 调用 callback 返回建议列表的数据
						cb(results);
					},
					createFilter(queryString) {
						return (restaurant) => {
							return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
						};
					},
					loadAll() {
						return [{"value": "顺丰速递"},
								{"value": "EMS快递"},
								{"value": "申通快递",},
								{"value": "圆通快递"},
								{"value": "天天快递"},
								{"value": "韵达快运"},
								{"value": "中通速递"},
								{"value": "汇通快运"},
								{"value": "全一快递"},
								{"value": "中铁快运"}];
					},
					addphysicalForm(rmform) {
						var _this = this;
						this.$refs[rmform].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/sales/prosale/delivergoods",
									//参数转换
									Qs.stringify(
										this.physicalform, {
											arrayFormat: 'brackets'
										})
									//	params:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									_this.dialogPhysicalVisible=false;
									showAtRight('/sales/prosale/outgood');
									
								}).catch(function() {
									alert("出错了");
								});
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
				},
				mounted:function(){
					this.restaurants= this.loadAll();
					var url= window.location.href;
					var url1= url.indexOf("?");
					if(url1!=-1){
						//截取每一个条件
						var urlcondition= url.substring(url1+1,url.length).split('&');
						for(var i=0;i<urlcondition.length;i++){
							
							if(urlcondition[i].split('=')[0]=="statusid"){
								this.value7=decodeURI(urlcondition[i].split('=')[1]);
							}
							if(urlcondition[i].split('=')[0]=="search"){
								this.inputtheme=decodeURI(urlcondition[i].split('=')[1]);
							}
						}
					}
				}
			});
		</script>
	</body>
</html>
